<template>
  <div class="">
    <div class="tabs_form">
      <el-form :inline="true" class="selectLabel">
        <el-form-item label="模块名称">
          <el-input
            v-model="queryReq.model"
            placeholder="请输入模块名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="queryReq.dateTime"
            type="daterange"
            align="right"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-select
      v-model="queryReq.operatorType"
      placeholder="请选择计划类型"
      @change="changeOperatorType"
      class="tabs_select"
    >
      <el-option
        v-for="item in selectParams"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        default-first-option
      >
      </el-option>
    </el-select>

    <div class="tabs_table">
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column
          prop="serialNo"
          label="序号"
          align="center"
          type="index"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="planType"
          label="计划类型"
          align="center"
          :formatter="planTypeFormatter"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="model"
          label="模块"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="标题"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="contentDetail"
          label="详细标题"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="cycle"
          label="周期"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template v-slot="scope">
            <el-tooltip placement="top">
              <template #content>
                周期明细 <br />
                总计划次数： {{ scope.row.planShowVO?.sumCount }}<br />
                计划已执行次数: {{ scope.row.planShowVO?.planExecutionsCount
                }}<br />
                计划未执行次数: {{ scope.row.planShowVO?.planUnexecutedCount
                }}<br />
                已打卡次数：{{ scope.row.planShowVO?.finishCount }} <br />
                打卡时间列表： {{ scope.row.planShowVO?.clockInTimeList }}<br />
                计划执行时间列表： {{ scope.row.planShowVO?.timeList }}<br />
                <br />
              </template>
              <span>周期明细 &nbsp;&nbsp;</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="achievement"
          label="成果"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template v-slot="scope">
            <el-tooltip placement="top">
              <template #content>
                成果明细 <br />
                <ul>
                  <li
                    v-for="file in scope.row.achievementShowVoList"
                    :key="file.id"
                  >
                    {{ file.fileName }} <br />
                  </li>
                </ul>
                <br />
              </template>
              <span>成果明细&nbsp;&nbsp;</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="230" align="center">
          <template v-slot="scope">
            <el-button
              type="info"
              @click="getClockInDetailConfig(scope.$index, scope.row, true)"
              plain
              >打卡详情</el-button
            >
            <el-button
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              plain
              >编辑</el-button
            >

            <el-popover
              placement="bottom"
              popper-class="el-pro1"
              :width="400"
              trigger="click"
            >
              <template #reference>
                <el-button
                  style="font-weight: 700"
                  type="text"
                  @click="showOther"
                  >⋮</el-button
                >
              </template>
              <el-button type="danger" @click="deleteData(scope.row)"
                >删除</el-button
              >
              <el-button
                type="primary"
                @click="changePlanStatus(scope.row, 1)"
                plain
              >
                设为执行中</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <DataEdit
      ref="rowRef"
      @changeDiaLog="changeStatus"
      :dialogVisible="dialogVisible"
      :isEdit="isEdit"
      :operatorType="operatorType"
    />
    <DataUpload :dataUploadVisible="dataUploadVisible" @exportData="exportData">
    </DataUpload>
    <clockInDetail
      :clockInDetailVisible="clockInDetailVisible"
      @getClockInDetailConfig="getClockInDetailConfig"
      ref="clockInDetailRef"
    ></clockInDetail>
  </div>
</template>

<script lang="ts" setup>
import {
  queryPlanInfo,
  deletePlanInfo,
  changeSchedulePlanStatus,
} from '@/api/scheduleSetting'
import { getGroupDetail } from '@/api/config'
import { reactive, ref, onMounted, inject } from 'vue'
import { queryCondition, rows } from '../scheduleSetting'
import { ElMessage, ElMessageBox } from 'element-plus'
import { translate } from '@/constants/dict'
import { planTypeMapping } from '@/constants/dict.enum'
import DataEdit from '../execution/dataEdit.vue'
import clockInDetail from '../execution/clockInDetail.vue'
import { getDateTime } from '@/components/util/dateTimeUtil'
import { selectCondition, selectDetail } from '@/constants/commonSelect'

const clockInDetailVisible = ref<boolean>(false)
const clockInDetailRef = ref<any>(null)

// 初始化查询
onMounted(() => {
  query()
  // 加载对应关系
  getOperatorType()

  getDateTimes()
})

const getDateTimes = () => {
  queryReq.dateTime = getDateTime()
}

var operatorType = inject<any>('operatorType')

const changeOperatorType = () => {
  operatorType.value = Number(queryReq.operatorType)
  query()
}

const changeOperator = () => {
  queryReq.operatorType = operatorType.value
  query()
}

const getOperatorType = async () => {
  getGroupDetail('constgroup_operator_type').then((res: any) => {
    selectParams.value = res
  })
}

// 改变计划状态 执行中
const changePlanStatus = (row: rows, status: number) => {
  let data = {
    scheduleId: row.id,
    planStatus: status,
  }

  changeSchedulePlanStatus(data).then((res: any) => {
    if (res.data) {
      ElMessage.success('操作成功')
      query()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// todo 两种formatter 的写法
const planTypeFormatter = (row: any) => {
  return translate(planTypeMapping, row.planType)
}

// 两种formatter 的写法
const operatorTypeFormatter = (row: string) => {
  selectParams.value.forEach((item) => {
    if (item.value === row) {
      return item.label
    }
  })
}

const getClockInDetailConfig = (index: number, row: any, status: boolean) => {
  console.log('打卡详情页面')
  clockInDetailVisible.value = status
  clockInDetailRef.value?.initsObj(row)
}

const selectParams = ref<selectDetail[]>([])
const isEdit = ref<number>(0)
let tableData = ref<rows[]>([])
const dialogVisible = ref<boolean>(false)
const dataUploadVisible = ref<boolean>(false)
let menushow = false

let queryReq: queryCondition = reactive({
  model: '',
  dateTime: [''],
  operatorType: 1,
  startTime: '',
  endTime: '',
  planStatus: 3,
})

const query = async () => {
  queryPlanInfo(queryReq).then((res) => {
    tableData.value = res.data.records
  })
}

const deleteData = (row: any) => {
  ElMessageBox.confirm('你确认删除这条数据吗?', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      deletePlanInfo(row.id).then((res: any) => {
        if (res.data) {
          query()
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })

      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const showOther = () => {
  menushow = !menushow
}

const rowRef = ref<any>(null)

const handleEdit = (index: number, row: any) => {
  dialogVisible.value = true
  isEdit.value = 1

  // 调用子组件的 initsObj 方法
  rowRef.value?.initsObj(row)
}

const changeStatus = (status: boolean) => {
  dialogVisible.value = status
  query()
}

const exportData = (status: boolean) => {
  console.log('导出数据')
  dataUploadVisible.value = status
}

defineExpose({
  changeOperator,
})
</script>

<style lang="scss" scoped>
.tabs_form {
  height: 60px;
  margin-top: 10px;
  position: relative;
}

.tabs_table {
  position: relative;
  margin-top: 30px;
}

.tabs_select {
  top: 0px;
  width: 200px;
}
.tabs_button {
  position: absolute;
  left: 300px;
  top: 10px;
}

.selectLabel {
  position: absolute;
  right: 10px;
}

.buttonLabel {
  margin-left: 20px;
  margin-bottom: 40px;
}
</style>
